<template>
	<div>
		<input type="file" @change="chooseFile"/>
		<button @click="startUpload">上传文件</button>
	</div>
</template>

<script lang="ts" setup>
import { Http } from '@/utils/http';
import { ref } from 'vue';

const file = ref<File | null>(null);

const chooseFile = (e: any) => {
	file.value = e.target.files[0];
};

const startUpload = () => {
	console.log('file', file.value);
	if (!file.value) return;
	const chunkSize = 1024 * 1024; // 1MB 分片大小
	const totalChunks = Math.ceil(file.value.size / chunkSize);
	let uploadedChunks = 0;
	for (let i = 0; i < totalChunks; i++) {
		const start = i * chunkSize;
		const end = Math.min(start + chunkSize, file.value.size);
		const chunk = file.value.slice(start, end);
		console.log('chunk', chunk)
		// Http.post('/upload', chunk, {
		//   headers: {
		//     'Content-Type': 'application/octet-stream',
		//     'Upload-Index': i,
		//     'Total-Chunks': totalChunks,
		//     'Total-Size': file.value.size,
		//   },
		//   onUploadProgress: (progressEvent) => {
		//     const percentCompleted = Math.round(
		//       (progressEvent.loaded / progressEvent.total) * 100
		//     );
		//     this.progress = (uploadedChunks * 100 / totalChunks + percentCompleted / totalChunks);
		//   },
		// }).then(() => {
		//   uploadedChunks++;
		//   if (uploadedChunks === totalChunks) {
		//     console.log('文件上传完成');
		//   }
		// });
	}
};
</script>

<style lang="scss" scoped></style>
